import { Component, OnInit, Input } from '@angular/core';
import { ManageService } from "src/app/@core/manage.service";
import { DialogService } from "ng-devui/modal";
import { QrCodeComponent } from '../qr-code/qr-code.component';
import { OrderManageService } from 'src/app/@core/order-manage.service';
import { AuthGuardService } from '../../@core/auth-guard-service.guard'

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.scss']
})
export class OrderComponent implements OnInit {
  @Input() close;
  @Input() collectionIndex;
  @Input() subCollectionIndex;
  @Input() orderData;
  userId = parseInt(localStorage.getItem('userId'))

  constructor(
    private manageService: ManageService,
    private dialogService: DialogService,
    private orderManageService: OrderManageService,
    private authGuardService: AuthGuardService
  ) { }

  qrUrl: string
  payment = 'wechatpay'
  orderState = {
    'SUCCESS': '已完成',
    'NOTPAY': '待付款',
    'CLOSED': '已取消',
    'REVOKED': '已取消',
    'USERPAYING': '待付款',
    'PAYERROR': '待付款'
  }
  order: any
  orderDetail = {
    id: null,
    description: null,
    pictureName: null,
    author: null,
    type: null,
    supplies: null,
    pictureUrl: null,
    collectionName: null,
    price: null,
  };

  ngOnInit(): void {
    this.order = this.orderData
    if (escape(this.order.orderStatus).indexOf("%u") < 0) {
      this.order.orderStatus = this.orderState[this.order.orderStatus]
    }
    this.manageService
      .collectionDetail(this.collectionIndex, this.subCollectionIndex)
      .subscribe((res) => {
        this.orderDetail.description = res.data.collectionsInfo[0].detail.description;
        this.orderDetail.pictureName = res.data.collectionsInfo[0].detail.name;
        this.orderDetail.author = res.data.collectionsInfo[0].issuer;
        this.orderDetail.type = res.data.collectionsInfo[0].detail.category;
        this.orderDetail.supplies = res.data.collectionsInfo[0].supplies;
        this.orderDetail.pictureUrl = res.data.collectionsInfo[0].detail.url;
        this.orderDetail.price = res.data.collectionsInfo[0].price;
      })
  }

  selectPayment(type: string) {
    this.payment = type
  }

  payOrder() {
    this.orderManageService.getQrCode(this.userId, this.order.orderId, this.payment).subscribe((res) => {
      if (res.code == 0) {
        this.qrUrl = res.data.codeUrl
        this.getPaymentResult(this.order.orderId)
      }
      else {
        this.authGuardService.showModalPanel('warning', res.msg)
        this.close()
      }
    })
  }

  getPaymentResult(orderId) {
    this.orderManageService.buildWebsocket(orderId).subscribe((res) => {
      if (res.code === 0 && res.data.orderStatus === 'SUCCESS') {
        this.authGuardService.showModalPanel('success', '购买成功！')
        this.close()
      }
      else {
        this.authGuardService.showModalPanel('warning', res.msg)
        this.close()
      }
    })

  }

  openDialog() {
    const results = this.dialogService.open({
      id: "dialog-service",
      width: "450px",
      maxHeight: "600px",
      draggable: true,
      backdropCloseable: false,
      escapable: false,
      content: QrCodeComponent,
      buttons: [],
      data: {
        time: this.order.expireTime,
        qrUrl: this.qrUrl,
        orderId: this.order.orderId,
        close: (event) => {
          results.modalInstance.hide()
          this.close()
        }
      }
    })
  }
}
